<template>
  <div>
    <a-modal title="SKU详情" :visible="visible" @before-open="open" @cancel="cancel" :footer="false" :align-center="false" title-align="start" width="1000px" :mask-closable="false">
      <div class="clearfix">
        <div class="fl" style="width: 200px; height: 200px">
          <a-image :src="getSrc()" :width="200" :height="200" />
        </div>
        <div class="fl" style="width: calc(100% - 200px)">
          <a-descriptions :data="skuBasicInfoList" :label-style="{ textAlign: 'right' }" :value-style="{ width: '300px' }" :column="2">
            <template #label="{ data }">
              <span class="label">{{ data.label }}：</span>
            </template>
            <template #value="{ data }">
              <div v-if="data.label == 'SKU名称'">{{ skuInfo.skuName || '--' }}</div>
              <div v-if="data.label == 'SKU'">{{ skuInfo.sku || '--' }}</div>
              <div v-if="data.label == '产品状态'">{{ filterSkuStatus() || '--' }}</div>
              <div v-if="data.label == 'SPU'" class="highlight cursor" @click="showSpuDetail">{{ skuInfo.spu || '--' }}</div>
              <div v-if="data.label == '重量'">
                <div v-if="skuInfo.weight && skuInfo.weight.weight">{{ $extract(skuInfo, 'weight.weight') }}({{ $extract(skuInfo, 'weight.unit') }})</div>
                <div v-else>--</div>
              </div>
              <div v-if="data.label == '体积'">
                <a-space v-if="skuInfo.volume">
                  <div>{{ $extract(skuInfo, 'volume.length') ? $extract(skuInfo, 'volume.length') : '-' }}×</div>
                  <div>{{ $extract(skuInfo, 'volume.width') ? $extract(skuInfo, 'volume.width') : '-' }}×</div>
                  <div>{{ $extract(skuInfo, 'volume.height') ? $extract(skuInfo, 'volume.height') : '-' }}</div>
                  <div>{{ $extract(skuInfo, 'volume.unit') }}</div>
                </a-space>
                <div v-else>--</div>
              </div>
              <div v-if="data.label == '销售员'">{{ getSalerNames(skuInfo) || '--' }}</div>
              <div v-if="data.label == '产品类目'">{{ $extract(skuInfo, 'category.name') || '--' }}</div>
              <div v-if="data.label == '采购部门'">{{ $extract(skuInfo, 'purchaseDeptList[0].name') || '--' }}</div>
              <div v-if="data.label == '开发部门'">{{ $extract(skuInfo, 'developer.deptName') || '--' }}</div>
              <div v-if="data.label == '标签'">
                <a-space v-if="skuInfo.tagList" wrap>
                  <div v-for="tag of skuInfo.tagList" class="tag-btn" :style="{ backgroundColor: tag.color }">{{ tag.name }}</div>
                </a-space>
                <div v-else>--</div>
              </div>
              <div v-if="data.label == '备注'">{{ skuInfo.remark || '--' }}</div>
            </template>
          </a-descriptions>
        </div>
      </div>

      <div v-if="specList[0]">
        <div class="title-bar">规格</div>
        <a-descriptions class="mt10 mb10" :data="specList" bordered />
      </div>

      <a-tabs v-model:active-key="currentTab">
        <a-tab-pane title="产品图" :key="1">
          <downloadPic ref="downloadPic" />
        </a-tab-pane>
        <a-tab-pane title="产品属性" :key="2">
          <div v-if="skuInfo.propList && skuInfo.propList[0]" class="mt10">
            <a-descriptions :data="propertyListData" bordered />
          </div>
          <a-empty v-else />
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <ShowSpuDetail ref="showDetial" :detail="spuDetail" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, reactive } from 'vue'
  import { searchSpuAndCOmpanyDetail, productSKUDetail } from '@/api/product'
  import _ from 'lodash-es'
  import ShowSpuDetail from './showSpuDetail.vue'
  import DownloadPic from './downloadPic.vue'

  export default defineComponent({
    emits: ['save'],
    props: ['detail'],
    components: { ShowSpuDetail, DownloadPic },
    setup(props, { emit }) {
      let visible = ref(false)
      const showDetial = ref()
      const downloadPic = ref()
      const spuDetail = ref({ type: '', data: {} })
      let skuInfo: any = ref({})
      let specList: any = ref([])
      let propertyListData: any = ref([])

      const skuBasicInfoList = ref([
        { label: 'SKU名称', span: 2 },
        { label: 'SKU', value: '' },
        { label: '产品状态', value: '' },
        { label: 'SPU', value: '' },
        { label: '重量', value: '' },
        { label: '体积', value: '' },
        { label: '销售员', value: '' },
        { label: '产品类目', value: '' },
        { label: '采购部门', value: '' },
        { label: '开发部门', value: '' },
        { label: '标签', value: '' },
        { label: '备注', value: '' },
      ])

      let currentTab = ref(1)
      const open = () => {
        getSkuDetail()
      }

      const cancel = () => {
        spuDetail.value = { type: '', data: {} }
        skuInfo.value = {}
        visible.value = false
      }

      const getSkuDetail = async () => {
        const res = await productSKUDetail(props.detail.data.id)
        skuInfo.value = res?.data || {}
        specList.value = []
        if (skuInfo.value.specValueList) {
          skuInfo.value.specValueList.forEach((e: any) => {
            let obj = { label: e.nameCn, value: e.valueCn }
            specList.value.push(obj)
          })
        }
        downloadPic.value.init(skuInfo.value)

        if (skuInfo.value.propList) delPropertyListData(skuInfo.value.propList)
      }

      const delPropertyListData = (list: any) => {
        propertyListData.value = []
        list.forEach((e: any) => {
          let obj = {
            label: e.name,
            value: '',
          }
          let text = ''
          switch (e.type) {
            case 1:
            case 4:
              text = e.valueStr
              break
            case 2:
            case 7:
            case 8:
              text = e.valueStrList.join(',')
              break
            case 3:
              text = e.valueBoolean ? '是' : '否'
              break
            case 5:
              text = e.valueNumber
              break
            case 6:
              text = e.valueBigDecimal
              break
            default:
              text = '类型未定义'
              break
          }
          obj.value = text
          propertyListData.value.push(obj)
        })
      }

      const getSrc = () => {
        let str = skuInfo.value?.productPicList && skuInfo.value?.productPicList[0] ? skuInfo.value?.productPicList[0].url : ''
        let newStr = ''
        if (str.indexOf('cdn.shopify.com')) {
          newStr = `https://erpapi.selleroa.com/v1/aliyun/oss/getAmazonImage?url=${str}`
        } else {
          newStr = str
        }
        return newStr
      }

      const showSpuDetail = async () => {
        const res = await searchSpuAndCOmpanyDetail(props.detail.data.spu, props.detail.data.companyId)
        spuDetail.value.data = res?.data
        showDetial.value.visible = true
      }

      const filterSkuStatus = () => {
        let text = ''
        switch (skuInfo.value.status) {
          case 'ACTIVE':
            text = '可售'
            break
          case 'NOT_ACTIVE':
            text = '停售'
            break
          case 'DISCONTINUED':
            text = '停产'
            break
          case 'OUTSOURCED':
            text = '委托加工'
            break
        }
        return text
      }

      const getSalerNames = (data: any) => {
        let arr = data.salerList || []
        return arr.map((e) => e.name).join(',')
      }

      return {
        visible,
        open,
        getSrc,
        showDetial,
        showSpuDetail,
        spuDetail,
        skuInfo,
        filterSkuStatus,
        specList,
        downloadPic,
        currentTab,
        propertyListData,
        cancel,
        skuBasicInfoList,
        getSalerNames,
      }
    },
  })
</script>

<style lang="less" scoped>
  .tag-btn {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    color: white;
    margin-right: 5px;
    margin-bottom: 5px;
  }
</style>
